<!-- eslint-disable prettier/prettier -->
<template>
  <div class="homeview-box wh-100">
    <nav>
      <div class="logo-box">
        <img src="@/assets/logo.png" alt="" />
        <span>商城后台</span>
      </div>
      <el-menu
        :unique-opened="true"
        :default-active="defaultactive"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#5421a2"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
        @jumpRouter="handleJumpRouter"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>我的首页</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/1-1">分析页</el-menu-item>
            <el-menu-item index="/home/1-2">工作台</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span>交易管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/2-1">订单管理</el-menu-item>
            <el-menu-item index="/home/2-2">评价中心</el-menu-item>
            <el-menu-item index="/home/2-3">试用页</el-menu-item>

          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-goods"></i>
            <span>商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/3-1">商品列表</el-menu-item>
            <el-menu-item index="/home/3-2">创建商品</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-s-ticket"></i>
            <span>营销中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/4-1">优惠券设置</el-menu-item>
            <el-menu-item index="/home/4-2">活动报名</el-menu-item>
            <el-menu-item index="/home/4-3">mock数据</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-s-marketing"></i>
            <span>数据统计</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/5-1">整体概览</el-menu-item>
            <el-menu-item index="/home/5-2">数据分析</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-s-shop"></i>
            <span>店铺管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/6-1">店铺信息</el-menu-item>
            <el-menu-item index="/home/6-2">修改店铺信息</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </nav>
    <main>
      <!-- 内容区顶部 -->
      <div class="main-top">
        <MainTop />
      </div>
      <!-- 内容区主体 -->
      <div class="main-container">
        <router-view />
      </div>
    </main>
  </div>
</template>
<!-- eslint-disable prettier/prettier -->
<script>
// @ is an alias to /src
import MainTop from "@/components/MainTop.vue";
import { eventBus } from "@/utils/eventBus";

export default {
  name: "HomeView",
  data() {
    return {
      defaultactive: "/home/1-1",
    };
  },
  components: {
    MainTop,
  },
  methods: {
    handleOpen(key, keyPath) {
      this.defaultactive = `/home/${key}-1`;
      this.$router.push(`${keyPath}-1`);
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(path) {
      this.$router.push(path);
      this.defaultactive = path;
    },
    handleJumpRouter() {
      eventBus.$on("jumpRouter", (path) => {
        this.defaultactive = path;
        // console.log(path);
      })
    }
  },
  mounted() {
    // console.log(this.$route.path);
    this.defaultactive = this.$route.path;
    this.handleJumpRouter();
  },
};
</script>
<!-- eslint-disable prettier/prettier -->
<style scoped lang="scss">
.homeview-box {
  display: flex;
  // 左侧导航栏设置
  nav {
    width: 160px;
    background: #5421a2;
    // logo 样式设置
    .logo-box {
      box-sizing: border-box;
      width: 100%;
      height: 60px;
      padding: 10px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;

      img {
        height: 100%;
      }
    }
  }
  // main 主体设置
  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    .main-top {
      height: 50px;
      background: #fff;
      // display: flex;
      // align-items: center;
    }
    .main-container {
      flex: 1;
      overflow: auto;
      background: #eee;
    }
  }
}
// element的样式设置
.el-menu {
  border: none !important;
}
:deep(.el-submenu .el-menu-item) {
  min-width: 0px;
}
:deep(.el-submenu__title) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
:deep(.el-menu .el-menu-item-group .el-menu-item-group__title) {
  padding: 1px;
}
</style>
